// 侧边栏
import React,{useEffect,useState} from 'react'
// import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
import { ReadOutlined, EditOutlined, DatabaseOutlined } from '@ant-design/icons';
import { Menu } from 'antd';

import { useNavigate,useLocation } from 'react-router-dom';

function getItem(label, key, icon, children, type) {
        return {
        key,
        icon,
        children,
        label,
        type,
        };
    }
    
    const items = [
        getItem('查看文章列表', 'listlist', <ReadOutlined />
        // <MailOutlined />,
        // [
        // getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
        // getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
        // ]
        ),
        getItem('查看注册人员', 'listtable', <ReadOutlined />
        // <MailOutlined />,
        // [
        // getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
        // getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
        // ]
        ),
        getItem('文章编辑', 'edit',<EditOutlined />,
        // <AppstoreOutlined />,
        // [
        // getItem('Option 5', '5'),
        // getItem('Option 6', '6'),
        // getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
        // ]
        ),
        getItem('修改资料', 'means',<DatabaseOutlined />,
        ),
    ];
    

const Aside = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const [defaultKey, setDefaultKey] = useState('')
    // 一般加个空数组就是为了模仿componentDidMounted
    useEffect(()=>{
        let path = location.pathname;
        let key = path.split('/')[1];
        setDefaultKey(key)
    }, [location.pathname])


    const onClick = (e) => {
        
        // console.log('click ', e);
        navigate('/' + e.key)
        setDefaultKey(e.key)
    };

    return (
        <div>
            <Menu
                onClick={onClick}
                style={{
                    width: 185,
                }}
                defaultSelectedKeys={[defaultKey]}
                mode="inline"
                items={items}
                theme="dark"
                className='aside'
                />
        </div>
    )
}

export default Aside;